iT邦幫忙

2021 iThome 鐵人賽

DAY 16
0
自我挑戰組

30 天重新設計印度氣象局官網首頁系列 第 16

Day 16 wireframe 黑白線稿 ( 細節精修+填入資訊 )

  • 分享至 

  • xImage
  •  

來找設計師一起 side project,前後端 / UIUX 皆可ㄛ。配對單連結:
https://docs.google.com/spreadsheets/d/1-6YCUfqaB7dQLQa34pbuCHgYvXU3eYZ0dvDcPszhE4g/edit?usp=sharing


印度氣象局官網:https://mausam.imd.gov.in/#.

prototype 大家自己玩玩看,應該會每天更新ㄅ:
https://xd.adobe.com/view/bd7fd57a-8e2f-44b0-bc26-322e98708133-e82c/


hi大家,今天是快樂又爆炸的禮拜五,所以我們要來處理資訊架構了。

沒啦 就是把該填東西填進去。
因為之前其實都有稍微想過了,所以其實也不會很困難,那我們開始吧~


處理 sidebar 資訊(先忽略 icon)

今天主要是處理 sidebar 的部分,我會盡量放入所有的資訊連結、各種頁面,所以要將他好好的分析歸納一下。

  1. about: 我會將 about 放在最上面(主要是印度好像很注重這個ㄚ)。
  2. departments; 再來是各部門的氣象網站,再來是應付資訊相關的比如說newsletter publication還有各種新聞稿都放在這裡
  3. services: 我將原本的印度氣象局網站底下的 services 三項挪到這邊。他們佔一個大項可能比重太多了,但嫌注意不足也是可以放在 footer。
  4. SOP: 可能比較少用因為是大量的pdf所以我放在最下面當然這是一個有點臨時的分法

hamburger我有小小的調整一下,把他整個往下拉, warning 放在最上面,比較符合使用動線。

weather 跟 climate 這兩個地方我想了很久,要怎麼去判斷在裡面各種預報系統?

我認為最好的方式是看使用者進入這個網站的目的是什麼,通常想知道「天氣」,和想知道「氣候」的,不會是同一群人。

原本氣象局全部都放在 forecasts 裡面,共有 12 項,但我覺得看起來是有點雜亂的,而且性質也有不同,所以我決定分成短期的 weather ,跟比較長期 climate 。

這樣子分的話,其實整體判斷也會相對簡單許多,然後我把天氣相關的自然災害、天氣現象放在 natural event 中。

footer 資訊

footer這裡的資訊,我將不常用的 link,如說招募、database login、招標等等放在最底下,並且降低它的透明度。

然後整整理了一下原本的 forcasts 這塊,發現幾乎是重複的,所以我把它整欄刪掉。

剩下可能會常用的LINK塞在相關網站,social LINK 我有把他整個拉下來了。

其實 footer 我動的不是很多,主要是 UI 的部分。

資訊配置差不多的頁面

specialized forecasts 還沒有時間弄><

明天再說,我們的線稿其實都差不多了,所以明天我們將會把剩下的資訊搞定+配點色。

好ㄌ我要累死了,大家早點歲,早歲早起身體好。


上一篇
Day 15 UI wireframe 線稿的製作經驗與技巧分享(和實際踩過的雷!)
下一篇
Day 17 淘家集運 插畫分享
系列文
30 天重新設計印度氣象局官網首頁22
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言